
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>BforBlogger Fixed Horizontal Fade In Fade Out Menu For Blogger</title>
      <link rel="stylesheet" href="https://files-all-tech-corner.googlecode.com/svn/trunk/demo/fadeoutmenu.css"/>
<script type="text/javascript" src="https://files-all-tech-corner.googlecode.com/svn/trunk/demo/jquery-1.3.2.js"></script>
 <script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
					var scrollTop = $(window).scrollTop();
					if(scrollTop != 0)
						$('#nav').stop().animate({'opacity':'0.2'},400);
					else	
						$('#nav').stop().animate({'opacity':'1'},400);
				});
				
				$('#nav').hover(
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('#nav').stop().animate({'opacity':'1'},400);
						}
					},
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('#nav').stop().animate({'opacity':'0.2'},400);
						}
					}
				);
            });
        </script>
    </head>
    <style>
        body{
            margin:0px;
            padding:0px;           
            font-family:Arial;
           background:#3A3A3A url(http://4.bp.blogspot.com/-DL4ApwcUnUk/U4qkDYys11I/AAAAAAAAEJY/y_8wyMV8ysQ/s1600/fixedmenu2.png) no-repeat top center;
        }
		a.back{
            width:256px;
            height:73px;
            position:fixed;
            bottom:15px;
            right:15px;
            background:transparent url(http://1.bp.blogspot.com/-b6Nj0WqCwv0/U4qkDJ7_-BI/AAAAAAAAEJU/GRvP7lpfFx8/s1600/bforblogger_back+2.png) no-repeat top left;
        }
        .scroll{
            width:133px;
            height:61px;
            position:fixed;
            bottom:15px;
            left:20px;
            background:transparent url(http://4.bp.blogspot.com/-Jbt4MdJ0Tx4/U4qkEUWEVCI/AAAAAAAAEJs/tKP1dFov5oU/s1600/scroll+2.png) no-repeat top left;
        }
        .info{
            text-align:right;

        }
		.desc{
			height:90px;
			width:100%;
			position:absolute;
			top:1000px;
			left:0px;
			background:transparent                                                url(http://4.bp.blogspot.com/-G-E7IRKfHgk/U4qkEMxdzgI/AAAAAAAAEJw/uAqlVj6Rd1A/s1600/hover2.png) no-repeat center center;
		}
		#top{
			top:0px;
			left:0px;
			position:absolute;
			width:100%;
			height:10px;
		}
		#bottom{
			top:1500px;
			left:0px;
			position:absolute;
			width:100%;
			height:90px;
			background:transparent url(http://3.bp.blogspot.com/-Az8GRRPfAUM/U4qkDYKO5GI/AAAAAAAAEJg/47srd6CBh9M/s1600/end+2.png) no-repeat center center;
		}
#adpack-wrapper{
	top:45px !important;
}
    </style>
    <body>
        <div id="nav">
            <ul>
                <li><a class="top" href="#top"><span></span></a></li>
                <li><a class="bottom" href="#bottom"><span></span></a></li>
                <li><a>Link 1</a></li>

                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
                <li><a>Link 4</a></li>
                <li><a>Link 5</a></li>
                <li><a>Link 6</a></li>
                <li class="search">

					<input type="text"/><input class="searchbutton" type="submit" value=""/>
				</li>
            </ul>
        </div>        
		<div id="top"></div>
		<div class="desc"></div>
		<div id="bottom"></div>
		<div class="scroll"></div>
        <div class="info">

            <a class="back" href="http://www.bforblogger.com/2014/05/fixed-horizontal-fade-in-fade-out-menu.html"></a>
        </div>

        
       
	

    </body>
</html>